<template>
  <div class="login">
    <mt-header class="header">
      <router-link to="" @click="back" slot="left">
        <mt-button class="btn" @click="back"><img class="img" src="../assets/left.svg" alt="" slot="icon" height="30px"></mt-button>
      </router-link>
    </mt-header>
    <p class="title">登录/注册</p>
    <p class="title2" :class="{title2_sur}">未注册过的账号将自动创建账户</p>
    <p class="phone">账号</p>
    <input type="text" placeholder="请输入6~11位字符" class="input" v-model="phone" maxlength="11"><br>
    <p class="phone">密码</p>
    <input type="password" placeholder="请输入密码" class="input" v-model="pwd" maxlength="18"><br>
    <mt-button class="btn_next" :class="{btn_next_true}" size="large" :disabled="isdisabled" @click="login">登录/注册</mt-button>
    <p class="sel">
      <input type="checkbox" class="check" v-model="ischecked">
      <span>我已阅读并同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私条款</a></span>
    </p>
    <div class="icon">
      <img v-if="wx"  src="../assets/wx.png" alt="">
      <img v-else  src="../assets/wx_1.png" alt="">
      <img v-if="wx" src="../assets/QQ.png" alt="">
      <img v-else src="../assets/QQ_1.png" alt="">
      <img v-if="wx" src="../assets/wb.png" alt="">
      <img v-else src="../assets/wb_1.png" alt="">
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex"
export default {
  data(){
    return {
      isdisabled:true,
      ischecked:false,
      phone:"",
      pwd:"",
      btn_next_true:false,
      isshow:false,
      title2_sur:true,
      wx:true
    }
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    vali(){
      var reg = /^\w{6}/
      var reg2 = /[a-z]*\d+/
      if(reg.test(this.phone) == true && reg2.test(this.pwd) == true && this.ischecked == true){
        this.btn_next_true = true
        this.isdisabled = false
        this.title2_sur = false
        this.wx = false
      }else{
        this.btn_next_true = false
        this.isdisabled = true
        this.title2_sur = true
        this.wx = true
      }
    },
    login(){
      this.axios.post(`/bo_user/v1/login`,`uname=${this.phone}&upwd=${this.pwd}`).then(result=>{
        // console.log(result.data)
        if(result.data.length>0){
          this.$toast({
            message: '登录成功'
          });
          let user = result.data
          this.$store.commit("setuser",user)
          this.$store.commit("setislogin",1)
          console.log(JSON.stringify(user))
          sessionStorage.setItem("user",JSON.stringify(user))
          sessionStorage.setItem("islogin",1)
          this.$router.push("/my")
        }else{
          this.$messagebox.prompt("请设置用户名").then((value)=>{
            // console.log(value)
            var reg3 = /([\u4e00-\u9fa5]+)|([\u4e00-\u9fa5]*\w*)|(\w*[\u4e00-\u9fa5]*)/
            if(reg3.test(value.value) == true){
              this.axios.post(`/bo_user/v1/res`,`uname=${this.phone}&upwd=${this.pwd}&nickname=${value.value}`).then(result=>{
                // console.log(result.data)
                if(result.data.affectedRows > 0){
                  this.axios.post(`/bo_user/v1/login`,`uname=${this.phone}&upwd=${this.pwd}`).then(result=>{
                    if(result.data.length>0){
                      this.$toast({
                        message:"注册成功"
                      });
                      let user = result.data
                      this.$store.commit("setuser",user)
                      this.$store.commit("setislogin",1)
                      console.log(JSON.stringify(user))
                      sessionStorage.setItem("user",JSON.stringify(user))
                      sessionStorage.setItem("islogin",1)
                      this.$router.push("/my")
                    }
                  })
                }
              })
            }else{
              this.$messagebox.alert("用户名格式错误")
            }
          })
        }
      })
    }
  },
  watch:{
    phone(){
      this.vali()
    },
    ischecked(){
      this.vali()
    },
    pwd(){
      this.vali()
    }
  }
}
</script>
<style scoped>
.login{
  box-sizing: border-box;
}
.login>.header{
  background: #fff;
}
.login>.title{
  font-size: 34px;
  margin-top: 90px;
  margin-left: 30px;
}
.login>.phone{
  margin-top: 30px;
  margin-left: 30px;
  font-size: 12px;
  color: gray;
}
.login>.input{
  width: 82%;
  outline: none;
  border: none;
  border-bottom: 1px solid #E6E6E6;
  margin-top: 20px;
  margin-left: 30px;
  caret-color: orange;
  padding-left: 5px;
}
.login>.btn_next{
  background-color: #D7D7D7;
  color: #fff;
  margin-left: 30px;
  margin-top: 20px;
}
.login>.btn_next_true{
  background-color: orange;
}
.mint-button--large{
  width: 84%;
}
.login>.sel{
  display: flex;
  margin-left: 30px;
  margin-top: 20px;
}
.login>.sel>.check{
  margin-right: 5px;
}
.login>.sel>span{
  display: inline-block;
  font-size: 12px;
}
.login>.sel>span>a{
  color: orange;
}
.login>.title2{
  margin-left: 30px;
  color: gray;
  margin-top: 12px;
}
.login>.title2_sur{
  visibility:hidden;
}
.login>.icon{
  display: flex;
  justify-content: space-around;
  margin-top: 129px;
}
</style>